<template>
  <div>
    <nav-com></nav-com>
    <div class="main">
      <el-card shadow='always'>地址</el-card>
      <el-card>
        <span>支付方式</span>
        <el-button class="alipay">支付宝付款</el-button>
      </el-card>
      <el-card>
        <el-container>
          <el-aside width="200px">图片</el-aside>
          <el-main>           
            <div class="byname">{{showCurrent.bicyclename}}</div>
            <el-main>{{showCurrent.type}} </el-main>            
            <el-footer class="byprice">￥{{showCurrent.price}}/月</el-footer>

          </el-main>
        </el-container>
        
      </el-card>
      <el-card>
        <span>无可用优惠券</span>
        <span class="more">></span>
      </el-card>

      <span class="bill">账单明细</span>
      <el-card>
        <span>订单总价 ： </span>
        <span>共{{totalPrice}}元</span>
        <el-button class="payNow" type="primary">立即支付</el-button>
      </el-card>

    </div>
    立即支付
  </div>
</template>

<script>
import navCom from '@/components/Nav.vue'
// import {mapState} from 'vuex'
export default {
  name:'payView',
  components:{
    navCom
  },
  created(){
    
  },
  computed:{
      showCurrent(){
        return this.$store.state.currentInfo
      },
      totalPrice(){
        if(this.$store.state.currentInfo.type === '短租'){
          return this.$store.state.currentInfo.price * 6
        } else {
          return this.$store.state.currentInfo.price * 12
        }
      }
  }
}
</script>

<style scoped>
.main{
  width: 1200px;
  border: 1px solid red;
  margin: auto;
}
.el-card{
  margin:10px 0;
}

.byname{
  font-size:19px;
  color: black;
  font-weight: bold;
  
}
.byprice{
  color: red;
}

.more{
  float: right;
}

.bill{
  margin-left: 20px;
  font-weight: bold;
}

.payNow{
  float: right;
  margin-top: -8px;
}

.alipay{
  margin-left: 20px;
}
</style>